<template>
  <div class="service-add">
    <h2>添加服务</h2>
    <el-form
      :model="formData"
      label-width="100px"
      ref="serviceForm"
      size="medium"
    >
      <el-form-item label="服务类型">
        <el-select
          v-model="formData.service_type_id"
          placeholder="请选择服务类型"
        >
          <el-option
            :label="service.service_name"
            :value="service.service_id"
            v-for="service in type_data"
            :key="service.service_id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="服务名称">
        <el-input
          v-model="formData.service_name"
          placeholder="请输入服务名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="服务价格">
        <el-input
          v-model.number="formData.service_price"
          placeholder="请输入服务价格"
        ></el-input>
      </el-form-item>
      <el-form-item label="服务描述">
        <el-input
          type="textarea"
          v-model="formData.service_description"
          placeholder="请输入服务描述"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  
  <script>
import { getServiceCategoties, insertServiceDetail } from "@/utils/request";
export default {
  data() {
    return {
      formData: {
        service_type_id: "",
        service_name: "",
        service_price: null,
        service_description: "",
      },
      type_data: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      await getServiceCategoties()
        .then((res) => {
          this.type_data = res.data.data;
        })
        .catch((error) => {
          // 处理错误
          console.error(error);
        });
    },
    submitForm() {
      if (
        this.formData.service_type_id == "" ||
        this.formData.service_name == "" ||
        this.formData.service_price == null ||
        this.formData.service_description == ""
      ) {
        return;
      }
      insertServiceDetail(this.formData).then((res) => {
        if (res.data.status) {
          this.$message.success("添加成功");
          this.formData = {
            service_type_id: "",
            service_name: "",
            service_price: null,
            service_description: "",
          };
        }
      });
    },
    resetForm() {
      this.formData = {
        service_type_id: "",
        service_name: "",
        service_price: null,
        service_description: "",
      };
    },
  },
};
</script>
  
  <style scoped>
.service-add {
  margin: 20px;
}
</style>
  